<template>
	<view>
		<my-switch-navbar :activeTab.sync="activeTab" :tabName="tabName"></my-switch-navbar>
		<!-- 考试分析 -->
		<my-empty v-if="!analyInfo.score && activeTab==0"></my-empty>
		<view class="analysisView" v-show="activeTab==0 && analyInfo.score">
			<view class="analyList">
				<view class="analyListTop">
					<view class="analyIcon analyCollect">
						<my-icon name="Collection-h"></my-icon>
					</view><text class="topTit">考试分数最高</text>
				</view>
				<view class="analyListBot">
					<view class="analyScore"><text class="txtGreen">{{analyInfo.score}}</text>分</view><text class="botTime">{{analyInfo.scoreTime}}</text>
				</view>
			</view>
			<view class="analyList">
				<view class="analyListTop">
					<view class="analyIcon analyRank">
						<my-icon name="ks-rank"></my-icon>
					</view><text class="topTit">考试排名最高</text>
				</view>
				<view class="analyListBot">
					<view class="analyScore">第<text class="txtOrg">{{analyInfo.rank?analyInfo.rank:0}}</text>名</view><text class="botTime">{{analyInfo.rankTime}}</text>
				</view>
			</view>
			<view class="analyList">
				<view class="analyListTop">
					<view class="analyIcon analyTime">
						<my-icon name="ks-time"></my-icon>
					</view><text class="topTit">考试用时最短</text>
				</view>
				<view class="analyListBot">
					<view class="analyScore"><text class="txtYellow">{{analyInfo.duration}}</text>分钟</view><text class="botTime">{{analyInfo.durationTime}}</text>
				</view>
			</view>
			<view class="analyList analyChart">
				<view class="analyListTop">
					<view class="analyIcon analyTubiao">
						<my-icon name="tubiao"></my-icon>
					</view><text class="topTit">半年成绩对比</text>
				</view>
				<!-- 折线Line纯数字-->
				<view class="line">
					<line-chart ref="lineData2" canvasId="index_line_2" :dataAs="lineData2" />
					<view class="line_txt" style="text-align: center;line-height: 40px;">上月相较前一月稳步提升，本月不要骄傲呀！</view>
				</view>
			</view>
		</view>
		<view v-if="activeTab==1">
			<view class="notice"  v-for="item in list" :key="item.unid" >
				<view class="content">
					<view class="title">
						<text class="text-ellipsis">{{ item.examname}}</text>
					</view>
					<view class="time">
						<image src="../../static/icon/clock.png" mode=""></image>
						<text>交卷时间：{{ item.date }}</text>
					</view>
				</view>
				<view :class="[item.isPass?'txtgre':'txtOrg']">{{item.score}}分</view>
			</view>
		 <u-loadmore v-show="status === 'loading'" icon-type="flower" bg-color="#FFFFFF" :status="status" @loadmore="getPageData()" :margin-top="20" />
		 <my-empty v-if="list.length==0"></my-empty>
		</view>
	</view>
</template>

<script>
	import LineChart from '../../custom-components/my-chart';
	export default {
		components: {
			LineChart
		},
		data() {
			return {
				activeTab: 0,
				tabName: ['考试分析', '历史成绩'],
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#ef4c3a'
						}
					}
				],
				list: [],
				isLastPage: false,
				status: 'loadmore',
				pageNo: 1,
				analyInfo:{},//考试分析数据
				lineData2: {
					//数字的图--折线图数据
					categories: [],
					series: []
				},
			}
		},
		onLoad(){
			this.getAnalysis()
			this.init();
		},
		onReachBottom() {
			!this.isLastPage && this.getPageData();
		},
		watch: {
			activeTab(newValue, oldValue) {
				if (newValue === 1 && this.status !== 'nomore') {
					// this.getWrongPaper();
				}
			}
		},
		methods: {
			init() {
				this.status = 'loadmore';
				this.pageNo = 1;
				this.list = [];
				this.isLastPage = false;
				return this.getPageData();
			},
			// 历史成绩
			getPageData() {
				this.status = 'loading';
				const pageData={
					"pageNo":this.pageNo
				}
				return new Promise((resolve, reject) => {
					this.request
						.post('/app/mine/historyGrade', pageData)
						.then(res => {
							const { list, isLastPage} = res;
							this.list = this.list.concat(list);
							if (isLastPage) {
								this.isLastPage = isLastPage;
								this.status = 'nomore';
							} else this.pageNo++;
							resolve();
						})
						.catch(reject)
						.finally(() => {
							this.status !== 'nomore' && (this.status = 'loadmore');
						});
				});
			},
			setData(target, val) {
				this.$set(target, this.activeTab, val);
			},
			getData(target) {
				return target[this.activeTab];
			},
			getAnalysis(){
				// 考试分析
				return new Promise((resolve, reject) => {
					this.request
						.get('/app/mine/gradeAnalyse')
						.then(res => {
							this.analyInfo=res;
							this.lineData2.categories= res.gradeCurve.map(item=>item.name+'月')//折线图底部值
						  this.lineData2.series=[{ name: '平均分', data: res.gradeCurve.map(item=>item.value) }];
							this.$nextTick(() => {
								//折线图
								this.$refs['lineData2'].showCharts();
							});
							//折线图数据
							this.getServerData(this.lineData2.categories,this.lineData2.series);
							resolve();
						})
						.catch(reject);
				});
			},
			//折线图数据调用
			getServerData(categories,series) {
				this.$set(this.lineData2, 'categories', categories);
				this.$set(this.lineData2, 'series', series);
				this.$refs['lineData2'].showCharts();
			}
		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.analysisView {
		width: 690upx;
		margin: 0 auto 30upx;
		.line_txt{
			color: #4C5059;
			font-size: 28upx;
			margin-top: 20upx;
		}
		#canvasId{
			width: 100%!important;
			height: 260upx!important;
		}
		.analyList {
			width: 100%;
			height: 180upx;
			background: #fff;
			border-radius: 10upx;
			margin-top: 30upx;
			padding: 30upx
		}
		.iconfont{font-size: 28upx}
		.icon-Collection-h {color: #ff6453;}
		.icon-ks-rank{color: #ffa800;}
		.icon-ks-time{color:#5fba4a;}
		.icon-tubiao{color:#567fe5}
		.analyIcon {
			width: 60upx;
			height: 60upx;
			line-height: 60upx;
			border-radius: 60upx;
			text-align: center;
		}
		.analyCollect{
			background: rgba(255, 100, 83, .15);
		}
		.analyRank{
			background: rgba(255, 168, 0, .15);
		}
		.analyTime{
			background: rgba(95, 186, 74, .15);
		}
		.analyTubiao{
			background: rgba(86, 127, 229, .15);
		}

		.analyListTop {
			display: flex;
			justify-content: start;
			align-items: center;
			.topTit{
				font-size: 32upx;
				color: #4C5059;
				margin-left: 19upx;
			}
		}
		.analyListBot{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20upx;
			.analyScore{
				margin-left: 69upx;
				color: #A6A6A6;
				font-size: 26upx;
				text{
					font-size: 42upx;
					font-weight: 500;
				}
				.txtGreen{color: #5FBA4A; margin-right: 5upx;}
				.txtOrg{color: #F45C4B; padding:0 5upx}
				.txtYellow{color: #FFA800; margin-right: 5upx;}
			}
			.botTime{
				color: #A6A6A6;
				font-size: 26upx;
			}
		}
		.analyChart{
			height: 546upx;
		}
	}
	.txtgre{
		color: #5FBA4A;
		font-size: 32upx;
	}
	.txtOrg{
		color: #F45C4B;
		font-size: 32upx;
	}
	.notice {
		display: flex;
		align-items: center;
		position: relative;
		height: 150upx;
		flex: 1;
		padding: 0 30upx;
		background: #fff;
		margin-bottom: 20upx;
		.content {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			height: 70%;
			flex: 1;
		}
		.title {
			display: flex;
			align-items: center;
			font-size: 32upx;
			font-weight: 400;
			color: #363940;
			text {
				width: 550upx;
			}
		}
		.time {
			font-size: 26upx;
			font-weight: 400;
			color: #a6a6a6;
			display: flex;
			align-items: center;
			image {
				width: 28upx;
				height: 28upx;
				margin-right: 16upx;
			}
		}
	}
	.noticeSwipe{
		height: 150upx;
		margin-bottom: 20upx;
		.uni-swipe_box{
			background: #fff;
			height: 100%!important;
		}
	}
</style>
